<template>
  <div class="main">
    <div class="input" v-if="showSuccess === false && showError === false && pay.PayUrl">
      <vue-qr
        :size="400"
        :text="pay.PayUrl"
        :auto-color="true"
      />
      <div class="ercode-text">充值金额:{{store.state.AddCreditQuery.Amount}}元</div>
    </div>
    <div class="input" v-if="showSuccess">
      <i class="el-icon-check success"></i>
      <div class="ercode-text">充值成功!</div>
    </div>
    <div class="input" v-if="showError">
      <i class="el-icon-close success"></i>
      <div class="ercode-text">充值失败, 请联系工作人员</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import ReservationMixin from '@/mixins/reservation'
import { GetPayResult, GetQrCode, ReservationPayAndRegister } from './apis/reservation'
import { IReservationPayAndRegisterQuery, ISysPay } from './interface/reservation'
import VueQr from 'vue-qr'
import { IDoctor } from '@/interface/common'

@Component({
  components: {
    VueQr
  }
})
export default class RegisterPay extends mixins(ReservationMixin) {
  private pay : ISysPay | any = {}
  private showSuccess = false
  private showError = false

  private async created () {
    this.setTip('请扫码支付')
    this.setMaxTime(120)
    this.updateTimeHandler('back')
    if (!this.store.state.doctor) {
      this.$router.push(`/${this.getRoute()}/doctor`)
      return
    }
    this.logger.info(`${this.store.state.patient?.Name}开始充值, 金额:${this.store.state.AddCreditQuery.Amount}`)
    this.getQrCode()
  }

  private async getQrCode () {
    try {
      this.showLoading('正在获取门诊充值二维码')
      const result = await GetQrCode(this.store.state.AddCreditQuery)
      if (result.data?.Code === 200) {
        this.hideLoading()
        this.store.state.AddCreditPay = result.data.Data
        this.pay = result.data.Data
        this.getPayResult()
      } else {
        this.showLoading('获取门诊充值二维码失败')
        const handler = window.setTimeout(() => {
          this.hideLoading()
        }, 3000)
        this.handlers.push(handler)
        this.logger.warning(`获取门诊充值二维码失败${JSON.stringify(result)}`)
      }
    } catch (error) {
      this.logger.error(`获取门诊充值二维码异常:${error}`)
    }
  }

  private async getPayResult () {
    try {
      const result = await GetPayResult(this.pay.ID)
      if (result.data?.Code === 200) {
        if (result.data.Data.PayStatus === '支付成功' && result.data.Data.UseStatus === '成功') {
          this.logger.info('充值成功')
          this.showSuccess = true
          if (this.store.state.doctor) this.sign(this.store.state.doctor)
          return
        }
        if (result.data.Data.PayStatus === '支付成功' && result.data.Data.UseStatus === '失败') {
          this.logger.warning('支付成功, 充值失败')
          this.showError = true
          return
        }
      } else {
        this.logger.warning('获取支付结果失败')
      }
    } catch (error) {
      this.logger.error(`获取支付结果失败:${error}`)
    }
    const handler = window.setTimeout(() => {
      this.getPayResult()
    }, 1000)
    this.handlers.push(handler)
  }

  private async sign (doctor: IDoctor) {
    this.showLoading('挂号中...')
    const depId = doctor.Room?.DepartmentId ?? ''
    const cardNo = this.store.state.patient?.CardNo ?? ''
    const query : IReservationPayAndRegisterQuery = {
      DeptId: depId,
      CardNo: cardNo,
      DoctorCode: doctor.Code
    }
    const result = await ReservationPayAndRegister(query)
    this.hideLoading()
    if (result.data?.Code === 200) {
      this.$messageBox.show({
        content: '挂号成功',
        duration: 3,
        confirmText: '关闭',
        confirm: () => {
          this.home()
        },
        showCancel: false
      })
    } else {
      this.$messageBox.show({
        content: `挂号失败:${result.data?.Message}`,
        duration: 15,
        confirmText: '返回',
        cancelText: '关闭',
        cancel: () => {
          this.home()
        }
      })
    }
  }
}
</script>
<style>
  .el-button--primary {
      color: #FFF !important;
      background-color: #409EFF !important;
      border-color: #409EFF !important;
  }
  .el-button{
    border-radius: 0 4px 4px 0;
  }
</style>

<style scoped>
  .main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    align-items: center;
  }
  .input{
    width: 45%;
  }
  .ercode-text{
    font-size: 2.5rem;
    font-weight: bold;
    margin: 1rem 0;
  }
  .success{
    font-size: 10rem;
    color:darkkhaki;
  }
</style>
